<template>
  <div>
    <a-drawer
      :title="title"
      :maskClosable="true"
      :width="width"
      placement="right"
      :closable="true"
      @close="handleCancel"
      destroyOnClose
      :visible="visible"
      style="height: 100%;">
      <a-spin :spinning="confirmLoading">
        <j-form-container>
          <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
            <a-row>
              <a-col :span="24">
                <a-form-model-item label="客户姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
                  <a-input v-model="model.name" placeholder="请输入客户姓名"  ></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="客户电话" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="phone">
                  <a-input-number v-model="model.phone" :min="0" style="width: 100%" placeholder="请输入客户电话"  ></a-input-number>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="所在小区" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <!--                   <a-cascader :options="areaOptions" v-model="currentChooseArea" placeholder="请选择" change-on-select @change="changeArea" :fieldNames="dataFields" allowClear/>-->
                  <a-input v-model="currentChooseArea" readOnly @click="changeArea" placeholder="请选择小区" />
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="微信号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="wechatNumber">
                  <a-input v-model="model.wechatNumber" placeholder="请输入微信号"  ></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="项目地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <!--<a-input-number v-model="building" @change="validateAddress" style="width: 25%" ></a-input-number>&nbsp;栋&nbsp;
                  <a-input-number v-model="unit" @change="validateAddress" style="width: 25%" ></a-input-number>&nbsp;单元&nbsp;
                  <a-input-number v-model="room" @change="validateAddress" style="width: 25%"></a-input-number>&nbsp;室&nbsp;
                  <div class="ant-form-explain" style="margin-bottom: -20px;color: red" v-if="addressFlag">{{addressErrorMsg}}</div>-->
                  <a-input v-model="model.address" placeholder="请输入项目地址"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="装修风格" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="decorationStyle">
                  <j-dict-select-tag
                    placeholder="请输入装修风格"
                    dictCode="gh_customer_info_decoration_style"
                    v-model="model.decorationStyle"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="客源渠道" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="customerChannel">
                  <j-dict-select-tag
                    placeholder="请输入客源渠道"
                    dictCode="customer_info_customer_channel"
                    v-model="model.customerChannel"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="24" v-if="model.id != null">
                <a-form-model-item label="当前进展" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="progress">
                  <j-dict-select-tag
                    placeholder="请输入当前进展"
                    dictCode="customer_info_progress"
                    v-model="model.progress"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="房屋面积" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="houseArea">
                  <a-input-number v-model="model.houseArea" style="width: 100%" :min="0" placeholder="请输入房屋面积"></a-input-number>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="房屋户型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="houseType">
                  <j-dict-select-tag
                    placeholder="请选择房屋户型"
                    dictCode="customer_info_house_type"
                    v-model="model.houseType"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="量房时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="calculateTime">
                  <j-date placeholder="请选择量房时间"  v-model="model.calculateTime" :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" />
                </a-form-model-item>
              </a-col>

              <a-col :span="24" v-if="model.id == null">
                <a-form-model-item label="分享官" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="sharingOfficer">
                  <a-select
                    show-search
                    :allowClear="true"
                    placeholder="请选择分享官"
                    option-filter-prop="children"
                    v-model="model.sharingOfficer"
                    style="width: 100%"
                    :filter-option="filterOptionSharingOfficer"
                    @change="changeSharingOfficer">
                    <a-select-option :value="item.id" v-for="(item,index) in sharingOfficerOptions" :key="index">
                      {{item.name}}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>

            </a-row>
          </a-form-model>
        </j-form-container>
      </a-spin>
      <a-button type="primary" style="width: 100%" @click="handleOk">保存</a-button>
    </a-drawer>

    <!--<j-modal
      :title="title"
      :width="width"
      :visible="visible"
      switchFullscreen
      @ok="handleOk"
      :maskClosable="false"
      :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
      @cancel="handleCancel"
      cancelText="关闭">


    </j-modal>-->
    <map-container ref="mapContainer" @ok="selectedArea($event)"></map-container>
  </div>
</template>

<script>
  import MapContainer from "../../../../../components/amap/MapContainer";
  import { httpAction, getAction } from '@api/manage'
  import JDictSelectTag from '@comp/dict/JDictSelectTag'
  import { duplicateCheck } from '@/api/api'

  export default {
    name: 'GhCustomerInfoModal',
    components: {
      MapContainer
    },
    data () {
      return {
        title:'',
        width: '100%',
        visible: false,
        disableSubmit: false,
        model:{
        },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
          name: [{ required: true, message: '客户姓名不能为空' }],
          address: [{ required: true, message: '项目地址不能为空' }],
          houseArea: [{ required: true, message: '房屋面积不能为空' }],
          houseType: [{ required: true, message: '请选择房屋户型' }],
          decorationStyle: [{ required: true, message: '请选择装修风格' }],
        },
        url: {
          add: "/ghCustomerInfo/add",
          edit: "/ghCustomerInfo/edit",
          queryById: "/ghCustomerInfo/queryById",
          querySharingOfficerList: '/ghSharingOfficer/queryList',
          queryAddressInfoList: "/ghAddressInfo/queryAllList",
          checkAddressExist: "/ghCustomerInfo/checkAddressExist",
        },
        sharingOfficerOptions: [],
        areaOptions:[],
        dataFields: {
          label: 'name',
          key: 'id',
          value: 'code',
          children: "children"
        },
        customerId: '',
        currentChooseArea: '',
        poi: {},
        building: '',
        unit: '',
        room: '',
        addressFlag:false,
        addressErrorMsg:'',
      }
    },
    created() {
      this.initSharingOfficerList();
    },
    methods: {
      add() {
        this.edit({activitiSync:'1',userIdentity:1});
        this.visible = true;
        //this.edit(this.modelDefault);
      },
      edit(record) {
        this.customerId = record.id;
        this.model = Object.assign({}, record)
        if (record.provinceCode != null && record.cityCode != null && record.areaCode && record.townshipCode){
          this.currentChooseArea = record.provinceCode + record.cityCode + record.areaCode + record.townshipCode
        }
        this.visible = true;
      },
      handleOk () {
        /*let address = "";
        if (this.building != null && this.building !== '' && this.building !== 0){
          address += this.building + "栋";
        }else {
          this.$message.warning("请输入楼栋号")
          return;
        }
        if (this.unit != null && this.unit !== '' && this.unit !== 0){
          address += this.unit + "单元";
        }
        if (this.room != null && this.room !== '' && this.room !== 0){
          address += this.room + "室";
        }else {
          this.$message.warning("请输入房间号")
          return;
        }*/
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl += this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
              method = 'put';
            }
            if (this.poi != null){
              this.model.provinceCode = this.poi.province;
              this.model.cityCode = this.poi.city;
              this.model.areaCode = this.poi.district;
              this.model.townshipCode = this.poi.township;
              this.model.villageCode = this.poi.village;
              //this.model.address = address;
              this.model.lng = this.poi.lng;
              this.model.lat = this.poi.lat;
            }
            httpAction(httpurl, this.model, method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              } else {
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.close();
            })
          }
        })
        /*if (!this.addressFlag){

        }*/
      },
      initSharingOfficerList(){
        getAction(this.url.querySharingOfficerList).then(res=>{
          if(res.success){
            this.sharingOfficerOptions = res.result;
          }
        })
      },
      filterOptionSharingOfficer(input,option){
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
      changeSharingOfficer(value){

      },
      changeArea(){
        this.$refs.mapContainer.title = "选择小区"
        this.$refs.mapContainer.visible = true;
      },
      selectedArea(params) {
        this.poi = params;
        this.currentChooseArea = params.address;
      },
      close () {
        this.visible = false;
        this.model = {};
        this.currentChooseArea = '';
        this.poi = {};
        this.building = "";
        this.unit = "";
        this.room = "";
      },
      handleCancel () {
        this.close()
      },
      validatePhone(rule, value, callback){
        if(!value){
          callback()
        } else {
          if(new RegExp(/^1[3|4|5|6|7|8|9][0-9]\d{8}$/).test(value)){
            let params = {
              tableName: 'gh_customer_info',
              fieldName: 'phone',
              fieldVal: value,
              dataId: this.customerId,
            };
            duplicateCheck(params).then((res) => {
              if (res.success) {
                callback()
              } else {
                callback("手机号已存在!")
              }
            })
          }else{
            callback("请输入正确格式的手机号码!");
          }
        }
      },
      validateAddress(){
        let address = this.currentChooseArea;
        if (this.building == null || this.building === "" || this.building === 0){
          this.addressErrorMsg = "请输入楼栋号";
          this.addressFlag = true;
          return;
        }else {
          this.addressFlag = false;
          address += this.building + "栋"
        }
        if (this.unit != null || this.unit !== "" || this.unit !== 0){
          address += this.unit + "单元"
        }
        if (this.room == null || this.room === "" || this.room === 0){
          this.addressErrorMsg = "请输入房间号";
          this.addressFlag = true;
          return;
        }else {
          this.addressFlag = false;
          address += this.room + "室"
        }
        const that = this;
        getAction(this.url.checkAddressExist,{address: address}).then(res=>{
          if(res.success){
            that.addressFlag = false;
          }else {
            that.addressErrorMsg = "当前项目地址已存在";
            that.addressFlag = true;
          }
        })
      },
    }
  }
</script>